<template>
	<!-- 二手市场 -->
	<view class="SecondHandMarket public">
		<view class="">
			<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
		</view>
		<view class="main">
			<view class="main-item" v-for="item in postList" :key="item.id" @click="articleInfo(item)">
				<view class="main-item-image">
					<image v-if="item.instanceGraph" :src="item.instanceGraph"></image>
					<image v-else src="@/static/projectLOGO.png"></image>
				</view>
				<view class="main-item-title">
					{{ item.title }}
				</view>
				<view class="main-item-main">
					<view class="main-item-main-status">
						<text v-if="item.tags">{{ item.tags }}</text>
						<text>{{ item.mode_text }}</text>
					</view>
					<view class="main-item-main-price">
						￥<text>{{ item.price }}</text>
					</view>
				</view>
				<view class="del" v-if="item.member_info.member_id == userId" @click.stop="handleDel(item)">删除</view>
			</view>
		</view>
		<view @click="skipAdd">
			<IconAdd></IconAdd>
		</view>
	</view>
</template>

<script>
import IconAdd from '@/components/IconAdd/index.vue'
const $api = require('@/utils/request.js').API

export default {
	components: {
		IconAdd
	},
	data() {
		return {
			userId: uni.getStorageSync('userId'),
			// 列表
			postList: [],
			// 分页
			page: 1,
			// 总页数
			page_count: 1,
		}
	},

	onShow() {
		this.getPostList()
	},
	// 触底事件
	onReachBottom() {

		if (this.page == this.page_count) {
			uni.showToast({
				title: '没有更多了',
				icon: 'none'
			})
		} else {
			this.page = this.page + 1
			this.getPostList()
		}
	},
	methods: {
		// 获取帖子列表
		getPostList() {
			$api.secondhandList({ page: this.page }).then(res => {
				this.page_count = res.data.data.page_count
				res.data.data.list.forEach(item => {
					item.instanceGraph = this.$image + item.image.split(',')[0]
				})
				console.log(res.data.data.list);
				if (this.page == 1) {
					this.postList = res.data.data.list
				} else {
					this.postList = [...this.postList, ...res.data.data.list]
				}
			})
		},
		// 搜索
		search() {

		},
		// 删除
		handleDel(item) {
			this.page = 1
			$api.secondhanddel({ id: item.id }).then(res => {
				this.getPostList()
			})
		},
		// 跳转到发布页 
		skipAdd() {
			uni.navigateTo({
				url: './SecondHandRelease'
			})
		},
		// 跳转到帖子详情
		articleInfo(item) {
			uni.navigateTo({
				url: './positionInformation?id=' + item.id
			})
		}
	}
}
</script>

<style lang="less" scoped>
.SecondHandMarket {
	background: #FBFBFB;

	.main {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 702rpx;
		margin: auto;

		.main-item {
			width: 339rpx;
			height: 464rpx;
			background: #FEFEFE;
			box-shadow: 0rpx 1rpx 9rpx 1rpx rgba(151, 151, 151, 0.06);
			border-radius: 15rpx;
			margin-bottom: 20rpx;

			.main-item-image {
				image {
					width: 338rpx;
					height: 338rpx;
					border-radius: 15rpx 15rpx 0rpx 0rpx;
				}
			}

			.main-item-title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				padding: 10rpx 0 7rpx 13rpx;
			}

			.main-item-main {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 28rpx 0 13rpx;

				.main-item-main-status {
					text {
						display: inline-block;
						width: 65rpx;
						height: 31rpx;
						text-align: center;
						border-radius: 5rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 31rpx;
					}

					text:first-child {
						color: #F14500;
						border: 1px solid #F14500;
					}

					text:last-child {
						color: #e3d212;
						border: 1px solid #e3d212;
						margin-left: 12rpx;
					}
				}

				.main-item-main-price {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #F14500;

					text {
						font-size: 36rpx;
					}
				}
			}
		}
	}
}

.del {
	margin-right: 20rpx;
	padding-bottom: 20rpx;
	color: #3c9cff;
	text-align: right;
}
</style>